<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>设备管理</a-breadcrumb-item>
        <a-breadcrumb-item>设备列表</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div style="margin: 0 50px">设备序列号</div>
          <template>
            <a-input
              style="margin: 0 200px 0 50px"
              placeholder="请输入设备序列号"
              v-model="inputImei"
              @change="delayedTime"
            />
          </template>
          <div style="margin: 0 50px">停车点</div>
          <template>
            <a-select
              style="margin: 0 200px 0 50px; width: 200px"
              showSearch
              placeholder="选择停车点"
              optionFilterProp="children"
              @change="selectParkChange"
              :allowClear="allowClear"
              v-model="inputParkId"
            >
              <a-select-option v-for="p in parks" :key="p.id" :value="p.id"
                >{{ p.parkName }}
              </a-select-option>
            </a-select>
          </template>
        </div>
        <div class="box-condition-item" style="justify-content: flex-start">
          <div style="margin: 0 50px">是否在线</div>
          <div>
            <div class="button_online">
              <a-button
                type="primary"
                @click="onlineStatus(2)"
                :style="computedBtnStyle(2)"
                >全部</a-button
              >
              <a-button
                type="primary"
                @click="onlineStatus(0)"
                :style="computedBtnStyle(0)"
                >离线</a-button
              >
              <a-button
                type="primary"
                @click="onlineStatus(1)"
                :style="computedBtnStyle(1)"
                >在线</a-button
              >
            </div>
          </div>
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="loadDeviceList"
            >查询</a-button
          >
          <a-button
            type="primary"
            style="margin: 0 0 0 20px"
            @click="resetQueryCondition"
            >重置</a-button
          >
        </div>
      </div>
    </div>

    <!-- 表内容 -->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="openClick" icon="plus"
            >开闸</a-button
          >
          <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
          <a-button type="primary" @click="editClick" icon="edit"
            >编辑</a-button
          >

          <!-- 删除 -->
          <template v-if="selectedRowKeys.length != 0">
            <a-popconfirm
              title="确认删除？"
              okText="确认"
              cancelText="取消"
              @confirm="deleteClick"
              placement="topLeft"
            >
              <a-button type="danger" icon="delete">删除</a-button>
            </a-popconfirm>
          </template>
          <template v-else>
            <a-button type="danger" icon="delete" @click="deleteClick"
              >删除</a-button
            >
          </template>

          <a-button
            type="primary"
            @click="downloadTemplateClick"
            icon="download"
            >下载模板</a-button
          >
          <a-button
            type="primary"
            @click="downloadDeviceList"
            icon="download"
            >导出列表数据</a-button
          >

          <!--上传弹窗-->
          <a-button type="primary" @click="importExcel" icon="edit">导入</a-button>

        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          rowKey="no"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            columnWidth: '3.5%',
          }"
          :columns="columns"
          :dataSource="entryExitRecordList"
          :pagination="pagination"
          @change="tableTabSort"
          bordered
          size="small"
          :scroll="scroll"
        >
          <template slot="deviceOnlineStateSlot" slot-scope="text">
            <div v-if="text == 0">离线</div>
            <div v-if="text == 1">在线</div>
          </template>
          <template slot="deviceEnergy" slot-scope="text">
            <div>{{ text }}</div>
          </template>
          <template slot="log" slot-scope="text, record">
            <a-button type="primary" @click="deviceLog(record.imei)"
              >设备日志</a-button
            >
          </template>
          <template slot="heartbeat" slot-scope="text, record">
            <a-button type="primary" @click="heartBeatLog(record.imei)"
              >心跳历史</a-button
            >
          </template>
        </a-table>
      </div>
    </div>

    <!--其他界面(设备日志 && 心跳历史) -->
    <template>
      <div class="box-form-others" :style="computedShow" @click="maskTap">
        <div class="form" @click="addPagesTap" v-on:click.stop="doThis">
          <!--设备日志界面-->
          <div v-show="showLogView">
            <div class="box">
              <div>
                <div class="box-item" style="justify-content: space-between">
                  <div>
                    <a-icon type="user" />
                  </div>
                  <div>设备日志列表</div>
                  <div
                    class="close"
                    @click="hideAddPages"
                    style="align-self: flex-end"
                  >
                    <a-icon type="close" />
                  </div>
                </div>
                <div class="box-item">
                  <div style="margin: 0 50px">时间</div>
                  <template>
                    <div class="button_time">
                      <a-button
                        type="primary"
                        @click="button_time(0, 1)"
                        :style="computedStyle(0)"
                        >今天</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(1, 1)"
                        :style="computedStyle(1)"
                        >昨天</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(2, 1)"
                        :style="computedStyle(2)"
                        >本周</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(3, 1)"
                        :style="computedStyle(3)"
                        >上周</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(4, 1)"
                        :style="computedStyle(4)"
                        >本月</a-button
                      >
                    </div>
                  </template>
                  <template>
                    <div style="margin: auto 50px">
                      <a-range-picker
                        id="range-picker"
                        :showTime="{ format: 'HH:mm' }"
                        format="YYYY-MM-DD HH:mm"
                        :placeholder="['开始时间', '结束时间']"
                        @ok="onOk(1)"
                        @change="logOnChange"
                        :value="rangePickerValue()"
                      />
                    </div>
                  </template>
                </div>
                <div class="box-item" style="">
                  <a-table
                    :columns="columns_log"
                    :dataSource="data_log"
                    :pagination="pagination_log_heartbeat"
                    @change="logTableChange"
                    bordered
                    size="small"
                    :scroll="scroll_log_heartbeat"
                  >
                    <template slot="deviceEnergy" slot-scope="text">
                      <div>{{ text }}%</div>
                    </template>
                    <template slot="see" slot-scope="text, record">
                      <a-button
                        type="primary"
                        @click="seeLog_trigger(record.logUrl)"
                        >查看日志</a-button
                      >
                      <a-button
                        type="primary"
                        @click="downloadLogTrigger(record.logUrl)"
                        >下载</a-button
                      >
                    </template>
                  </a-table>
                </div>
              </div>
            </div>
          </div>

          <!--心跳历史界面-->
          <div v-show="showHeartbeatView">
            <div class="box">
              <div>
                <div class="box-item" style="justify-content: space-between">
                  <div>
                    <a-icon type="user" />
                  </div>
                  <div>心跳历史</div>
                  <div
                    class="close"
                    @click="hideAddPages"
                    style="align-self: flex-end"
                  >
                    <a-icon type="close" />
                  </div>
                </div>
                <div class="box-item">
                  <div style="margin: 0 50px">时间</div>
                  <template>
                    <div class="button_time">
                      <a-button
                        type="primary"
                        @click="button_time(0, 2)"
                        :style="computedStyle(0)"
                        >今天</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(1, 2)"
                        :style="computedStyle(1)"
                        >昨天</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(2, 2)"
                        :style="computedStyle(2)"
                        >本周</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(3, 2)"
                        :style="computedStyle(3)"
                        >上周</a-button
                      >
                      <a-button
                        type="primary"
                        @click="button_time(4, 2)"
                        :style="computedStyle(4)"
                        >本月</a-button
                      >
                    </div>
                  </template>
                  <template>
                    <div style="margin: auto 50px">
                      <a-range-picker
                        id="range-picker"
                        :showTime="{ format: 'HH:mm' }"
                        format="YYYY-MM-DD HH:mm"
                        :placeholder="['开始时间', '结束时间']"
                        @ok="onOk(2)"
                        @change="heartbeatOnChange"
                        :value="rangePickerValue()"
                      />
                    </div>
                  </template>
                </div>
                <div class="box-item" style="">
                  <a-table
                    :columns="columns_heartbeat"
                    :dataSource="data_heartbeat"
                    :pagination="pagination_log_heartbeat"
                    @change="heartbeatTableChange"
                    bordered
                    size="small"
                    :scroll="scroll_log_heartbeat"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import moment from "moment";
import AddPagesUtils from "../../utils/AddPagesUtils";
import Constant from "../../utils/Constant";
import EquipmentApi from "../../api/equipment/EquipmentManage";
import CommonApi from "../../api/CommonApi";
// import ArrearsRecordApi from "../../api/charge/ArrearsRecord";

const columns = [
  {
    title: "设备序列号",
    dataIndex: "imei",
    width: "11%",
  },
  {
    title: "停车点名称",
    dataIndex: "parkName",
    width: "8%",
  },
  {
    title: "车位号",
    dataIndex: "truckSpaceName",
    width: "10%",
  },
  {
    title: "电量",
    dataIndex: "deviceEnergy",
    width: "10%",
    scopedSlots: { customRender: "deviceEnergy" },
    sorter: () => {},
  },
  {
    title: "信号强度",
    dataIndex: "deviceSignal",
    width: "10%",
    sorter: () => {},
  },
  {
    title: "在线",
    dataIndex: "deviceOnlineState",
    width: "10%",
    scopedSlots: { customRender: "deviceOnlineStateSlot" },
    sorter: () => {},
  },
  {
    title: "故障状态",
    dataIndex: "deviceStatusStr",
    width: "10%",
    sorter: () => {},
  },
  {
    title: "最后上报时间",
    dataIndex: "lastLogTime",
    width: "10%",
  },
  {
    title: "单目",
    dataIndex: "directionOne",
    width: "10%",
  },
  {
    title: "双目",
    dataIndex: "directionTwo",
    width: "10%",
  },
  {
    title: "设备日志",
    dataIndex: "log",
    width: "10%",
    scopedSlots: { customRender: "log" },
  },
  {
    title: "心跳历史",
    dataIndex: "heartbeat",
    scopedSlots: { customRender: "heartbeat" },
  },

];

/*设备查询条件*/
const conditionOfDevice = {
  deviceImei: "",
  parkID: "",
  deviceOnlineState: "",
  limit: "10",
  curr: "1",
};

/*设备日志/心跳查询条件*/
const conditionOfLogHeartbeat = {
  imei: "",
  limit: "10",
  curr: "1",
  startTimeStamp: "",
  endTimeStamp: "",
  timeScreenCondition: 6,
};

/*-----------------设备日志/设备心跳--------------*/
const columns_log = [
  {
    title: "编号",
    dataIndex: "id",
    width: 86,
  },
  {
    title: "日志时间",
    dataIndex: "createdTime",
    width: 192,
  },
  {
    title: "电量",
    dataIndex: "deviceEnergy",
    width: 86,
    scopedSlots: { customRender: "deviceEnergy" },
  },
  {
    title: "信号强度",
    dataIndex: "deviceSignal",
    width: 86,
  },
  {
    title: "故障状态",
    dataIndex: "deviceStatus",
    width: 86,
  },
  {
    title: "查看",
    dataIndex: "logUrl",
    width: 278,
    scopedSlots: { customRender: "see" },
  },
];

const columns_heartbeat = [
  {
    title: "编号",
    dataIndex: "id",
    width: 430,
  },
  {
    title: "心跳时间",
    dataIndex: "createdTime",
    width: 430,
  },
];

export default {
  name: "EquipmentManage",

  data() {
    return {
      /*查询条件*/
      conditionOfDevice,
      conditionOfLogHeartbeat,
      selectDeviceOnlineState: 2,
      inputImei: "",
      inputParkId: [],
      /*当前选中的行数据*/
      entryExitRecordList: [],
      columns,
      selectId: -1,
      parks: [],
      deviceUploadUrl: Constant.TEMPLATEUPLOAD_URL,
      uploadHeaders: {
        authorization: JSON.parse(localStorage.getItem("userinfo")).data,
      },

      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        current: 1,
        defaultPageSize: 10,
      },

      /* 表单选择 */
      selectedRowKeys: [] /* 选择key */,

      /*表格固定头部*/
      scroll: {
        y: 550,
      },

      /*-----------------设备日志/设备心跳--------------*/
      isShowAddPages: false,
      selectImei: "",
      maskClose: true,
      // selectId: -1,
      data_log: [],
      data_heartbeat: [],
      columns_log,
      columns_heartbeat,
      /*日期控制*/
      momentArr: [],

      /*日志-心跳分页插件*/ //重复了
      pagination_log_heartbeat: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 10,
      },

      /*日志-心跳表格固定头部*/
      scroll_log_heartbeat: {
        y: 250,
      },
      //是否显示日志/心跳界面
      showLogView: false,
      showHeartbeatView: false,
      allowClear: true,
      loading: false,
      timer: null,
    };
  },

  mounted() {
    this.initData();
  },

  methods: {
    initData() {
      this.loadDeviceList();
      this.initParkList();
    },

    /* --------------- 停车点列表 --------------- */
    initParkList() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /* ---------------- 外部表单操作 ---------------- */
    addClick() {
      AddPagesUtils.showAddPages(Constant.viewType.COMMONDEVICE_ADD);
    },

    openClick() {
      let selectArray = this.getSelectArray();

      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个道闸");
        return;
      }

      for (let item of selectArray) {
        if (item.imei.slice(0, 2) == "LT") {
          this.$message.error("请去除非道闸设备！");
          return;
        }
      }

      // if(selectArray.length != 1) {
      //     this.$message.error("只能选择一个编辑");
      //     return ;
      // }
      // let value = selectArray[0].imei;
      let value = JSON.stringify(
        selectArray.map((item) => {
          return { truckSpaceId: item.imei, deviceId: item.id };
        })
      );

      EquipmentApi.initiativeOpenDevice(value)
        .then(() => {
          this.$message.success("开闸成功！");
          this.loadDeviceList(); // 重新加载
        })
        .catch((err) => {
          let data = err.data,
            msg = err.msg;
          this.$message(data || msg);
        });
    },

    editClick() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }

      if (selectArray.length != 1) {
        this.$message.error("只能选择一个编辑");
        return;
      }

      let data = selectArray[0];
      AddPagesUtils.showAddPages(
        Constant.viewType.COMMONDEVICE_EDIT,
        data,
        () => {
          this.loadDeviceList();
        }
      );
    },

    deleteClick() {
      let selectArray = this.getSelectArray();
      if (selectArray.length == 0) {
        this.$message.error("请至少选中一个");
        return;
      }

      let value = JSON.stringify(
        selectArray.map((item) => {
          return { deviceId: item.id, truckSpaceId: item.truckSpaceId };
        })
      );
      EquipmentApi.delCommonDevice(value)
        .then(() => {
          this.$message.success("删除成功！");
          this.loadDeviceList(); // 重新加载
        })
        .catch((err) => {
          let data = err.data,
            msg = err.msg;
          this.$message(data || msg);
        });
    },

    downloadTemplateClick() {
      window.open(Constant.TEMPLATEDOWN_URL);
    },

    importExcel(){
      AddPagesUtils.showAddPages(
              Constant.viewType.COMMON_DEVICE_IMPORT_EXCEL,
              null,
              () => {
                //this.loadDeviceList();
              }
      );
    },

    uploadChange(info) {
      console.log(info.file.status);
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} 文件上传成功！`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 文件上传失败！`);
      }
    },

    deviceLog(imei) {
      this.showLogView = true;
      this.showHeartbeatView = false;
      this.isShowAddPages = true;
      let condition = { imei: imei };
      this.log_flush(condition);
    },

    heartBeatLog(imei) {
      this.showHeartbeatView = true;
      this.showLogView = false;
      this.isShowAddPages = true;
      let condition = { imei: imei };
      this.heartbeat_flush(condition);
    },

    /* --------------- 设备查询条件 --------------- */
    selectParkChange() {
      this.conditionOfDevice.parkID = this.inputParkId || "";
      this.loadDeviceList();
    },

    /* 在线状态 */
    onlineStatus(status) {
      this.selectDeviceOnlineState = status;
      this.conditionOfDevice.deviceOnlineState =
        status == 0 ? "0" : status == 1 ? "1" : "";
      this.loadDeviceList();
    },

    tableTabSort(pagination, filters, sorter) {
      let sortType = undefined;
      let sortField = undefined;
      if (sorter) {
        let { order, columnKey } = sorter;
        if (order === "descend") {
          sortType = 0;
        } else if (order == "ascend") {
          sortType = 1;
        }

        if (columnKey == "deviceEnergy") {
          sortField = 0;
        } else if (columnKey == "deviceSignal") {
          sortField = 1;
        } else if (columnKey == "deviceOnlineState") {
          sortField = 2;
        } else if (columnKey == "deviceStatusStr") {
          sortField = 3;
        }
      }

      this.conditionOfDevice.sortType = sortType;
      this.conditionOfDevice.sortField = sortField;
      this.loadDeviceList(pagination.current);
    },

    resetQueryCondition() {
      this.inputImei = "";
      this.inputParkId = [];
      this.conditionOfDevice.parkID = [];
      // this.sortField = undefined;
      // this.sortType = undefined;

      this.clearSelectArray();
    },

    deviceChange() {
      this.loadDeviceList();
    },
    /*-----------根据查询条件导出数据到Excel---------*/
    downloadDeviceList(){
      /* ---- condition ---- */
      let condition = this.conditionOfDevice;
      condition.deviceImei = this.inputImei;
      let parkID = condition.parkID;
      if (isNaN(parkID)) condition.parkID = this.inputParkId;
      //调用导出
      EquipmentApi.downloadCommonDeviceInfoList(condition)
              .then((res) => {
                console.log(res);
                const link = document.createElement("a");
                const blob = new Blob([res.data], {
                  type: "application/vnd.ms-excel",
                });
                var fileName = decodeURIComponent(res.headers.fileName);
                if (fileName == null || fileName == "undefined") {
                  fileName = "设备型号管理.xlsx";
                }
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                link.setAttribute("download", `${fileName}`);
                link.click();
              })
              .catch((err) => {
                let data = err.data;
                if (data) {
                  return this.$message.warn(data);
                }
                console.log("导出设备绑定数据异常！", err);
              });
    },

    /* --------------- 查询设备列表 --------------- */
    loadDeviceList(pageNum) {
      this.loading = true;
      this.clearSelectArray();

      /* ---- condition ---- */
      let condition = this.conditionOfDevice;
      condition.deviceImei = this.inputImei;
      condition.curr = pageNum || 1;

      let parkID = condition.parkID;
      if (isNaN(parkID)) condition.parkID = this.inputParkId;

      /* ---- 查询 ---- */
      EquipmentApi.getCommonDeviceInfoList(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;

          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.entryExitRecordList = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
          this.loading = false;
        });
    },

    /* ---------------- 选中处理 ------------------- */
    getSelectArray() {
      let entryExitRecordList = this.entryExitRecordList || [];
      let selectedRowKeys = this.selectedRowKeys;
      return entryExitRecordList.filter((item) => {
        return selectedRowKeys.filter((no) => no == item.no).length > 0;
      });
    },

    clearSelectArray() {
      this.selectedRowKeys = [];
    },

    /* ----------------------------------------- */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    /* --------------- 内部弹窗 --------------- */
    seeLog_trigger(logUrl) {
      // let url = encodeURI(Constant.QiNiuURL + '/' + logUrl).replace(/#/g, "%23");
      let url = encodeURI(logUrl).replace(/#/g, "%23");
      window.open(url);
    },

    log_flush(condition) {
      // let imei = condition.imei;
      this.selectImei = condition.imei;
      this.selectLogHeartbeatTrigger(1, false);
    },

    downloadLogTrigger(logUrl) {
      // let url = encodeURI(Constant.QiNiuURL + '/' + logUrl + '?attname=').replace(/#/g, "%23");
      let url = encodeURI(logUrl + "?attname=").replace(/#/g, "%23");
      window.open(url);
    },

    /*心跳历史查询*/
    heartbeat_flush(condition) {
      // let imei = condition.imei;
      this.selectImei = condition.imei;
      this.selectLogHeartbeatTrigger(2, false);
    },

    /*-----------------设备日志/设备心跳--------------*/
    /*点击遮罩层*/
    maskTap() {
      if (!this.maskClose) return;
      this.hideAddPages();
    },

    /*隐藏遮罩层*/
    hideAddPages() {
      this.isShowAddPages = false;
    },

    /*防止子类点击事件被穿透*/
    addPagesTap() {},

    doThis() {},

    /*时间按钮控制*/
    button_time(e, type) {
      //type 1 日志 2 心跳
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.selectLogHeartbeatTrigger(type, true);
    },

    /*日期选择*/
    heartbeatOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(2);
      }
    },

    logOnChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      if (date == undefined || date.length == 0) {
        this.onOk(1);
      }
    },

    onOk(type) {
      this.selectId = -1;
      this.selectLogHeartbeatTrigger(type, true);
    },

    rangePickerValue() {
      return this.momentArr;
    },

    /* 拉取心跳&日志 */
    selectLogHeartbeatTrigger(type, sign) {
      this.conditionOfLogHeartbeat.imei = this.selectImei;
      this.conditionOfLogHeartbeat.timeScreenCondition = 6;
      let momentArr = this.momentArr;
      if (momentArr != undefined && momentArr.length > 0) {
        this.conditionOfLogHeartbeat.startTimeStamp =
          new Date(this.momentArr[0]).getTime() / 1000;
        this.conditionOfLogHeartbeat.endTimeStamp =
          new Date(this.momentArr[1]).getTime() / 1000;
      }
      //type 1 日志 2 心跳
      if (type == 1) {
        EquipmentApi.getDeviceLogRecordList(this.conditionOfLogHeartbeat)
          .then((data) => {
            this.data_log = data.data.list;
            this.pagination_log_heartbeat.total = data.data.total;
            this.clearConditionOfLogHeartbeat();
            if (sign) {
              this.pagination_log_heartbeat.defaultCurrent = 1;
            }
          })
          .catch((err) => console.log("error:", err));
      } else if (type == 2) {
        EquipmentApi.getDeviceHeartbeatRecordList(conditionOfLogHeartbeat)
          .then((data) => {
            this.data_heartbeat = data.data.list;
            this.pagination_log_heartbeat.total = data.data.total;
            this.clearConditionOfLogHeartbeat();
            if (sign) {
              this.pagination_log_heartbeat.defaultCurrent = 1;
            }
          })
          .catch((err) => console.log("error:", err));
      } else {
        console.log("error:type error");
      }
    },

    /* 日志表单改变 */
    logTableChange(page) {
      this.conditionOfLogHeartbeat.curr = page.current;
      this.selectLogHeartbeatTrigger(1);
      this.conditionOfLogHeartbeat.curr = 0;
    },

    /* 心跳表单处理 */
    heartbeatTableChange(page) {
      this.conditionOfLogHeartbeat.curr = page.current;
      this.selectLogHeartbeatTrigger(2);
      this.conditionOfLogHeartbeat.curr = 0;
    },

    /* 清楚弹窗数据 */
    clearConditionOfLogHeartbeat() {
      this.conditionOfLogHeartbeat.imei = "";
      this.conditionOfLogHeartbeat.limit = "10";
      this.conditionOfLogHeartbeat.curr = "";
      this.conditionOfLogHeartbeat.startTimeStamp = "";
      this.conditionOfLogHeartbeat.endTimeStamp = "";
      this.conditionOfLogHeartbeat.timeScreenCondition = "6";
    },
    delayedTime() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.deviceChange, 800);
    },
  },

  computed: {
    /*-----------------设备日志/设备心跳--------------*/
    computedShow() {
      return this.isShowAddPages ? "display: block;" : "display: none;";
    },
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "background-color: #FF7965" : "";
      };
    },
    computedBtnStyle() {
      return function (index) {
        return this.selectDeviceOnlineState === index
          ? "background-color: red;border:0;"
          : "";
      };
    },
  },
};
</script>

<style scoped>
/*组件样式*/
/*文本框*/
.ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}

.clickRowStyl {
  background-color: #c1e0fd;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.button_online {
  margin-left: 62px;
  display: flex;
}

.button_online button {
  margin-right: 10px;
}

.box-tool button {
  margin-right: 10px;
}

/*-----------------设备日志/设备心跳--------------*/
.box-form-others {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.box-form-others .form {
  width: 970.5px;
  height: 500px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  /*max-height: ;*/

  position: fixed;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0);
  /* flex */
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.box .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}
</style>
